<template>
	<div>
		<div class="container center banner">
			<img src="../../static/img/banner.png" alt="" class="img-responsive pc-bg">
			<img src="../../static/img/m-banner.png" alt="" class="img-responsive m-bg">
		</div>
		<div class="container center item-nav">
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
				<div class="pc-item-nav">
					<div class="pc-item-nav-tit">
						<label>学院概况</label>
						<span>/</span>
						<span>college overview</span>
					</div>
					<ul class="list-unstyled pc-item-nav-content">
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/sco_info"><span>学院简介</span></router-link></li>
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/sco_dyn"><span>学院动态</span></router-link></li>
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/co_construction"><span>集体建设</span></router-link></li>
						<li class="active"><i class="iconfont icon-arrows-8-2"></i><router-link to="/teacher"><span>师资力量</span></router-link></li>
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/campus_tour"><span>校园风光</span></router-link></li>
					</ul>
					<div>
						<router-link to="special_major_accouting">
							<img src="../../static/img/pro_info.png" class="img-responsive" alt="专业介绍">
						</router-link>
					</div>
					<div>
						<router-link to="sign_online">
							<img src="../../static/img/sign.png" class="img-responsive" alt="在线报名">
						</router-link>
					</div>
				</div>
				<!-- mobail -->
				<div class="m-item-nav m-3">
					<div v-for="(item,index) in list"  @click="toggleTabs(index)" :class="{active:index==nowIndex}">
						<span class="text-center">{{item.type}}</span>
					</div>
				</div>
			</div>
			<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 content">
				<div class="content-title bread-nav">
					<div class="content-left">
						<ul class="list-inline">
							<li v-for="(item,index) in list"  @click="toggleTabs(index)" :class="{active:index==nowIndex}">
								<i class="iconfont" :class="item.icon"></i>
								<span>{{item.type}}</span>
							</li>
						</ul>
					</div>
					<div class="content-right">
						<i class="iconfont icon-bofang"></i>
						<span><router-link to='/'>首页</router-link></span>
						<span>></span>
						<span><router-link to='/'>学院概况</router-link></span>
						<span>></span>
						<span><router-link to='/teacher'>师资力量</router-link></span>
					</div>
				</div>
				<!-- accouting -->
				<div class="teacher-box" v-show="nowIndex===0">
					<div v-for="item in accList">
						<div>
							<div class="pic">
								<img :src="item.headimg" class="img-circle" alt="">	
							</div>
							<div class="pic-info">
								<p><span class="name">{{item.name}}</span> | <span>{{item.professor}}</span></p>
								<p><span>{{item.teachexp}}</span><span>{{item.workexp}}</span></p>
							</div>
						</div>
					</div>
				</div>
				<!-- design -->
				<div class="teacher-box" v-show="nowIndex===1">
					<div v-for="item in act">
						<div>
							<div class="pic">
								<img :src="item.headimg" class="img-circle" alt="">	
							</div>
							<div class="pic-info">
								<p><span class="name">{{item.name}}</span> | <span>{{item.professor}}</span></p>
								<p><span>{{item.teachexp}}</span><span>{{item.workexp}}</span></p>
							</div>
						</div>
					</div>
				</div>
				<!-- computer -->
				<div class="teacher-box" v-show="nowIndex===2">
					<div v-for="item in computer">
						<div>
							<div class="pic">
								<img :src="item.headimg" class="img-circle" alt="">	
							</div>
							<div class="pic-info">
								<p><span class="name">{{item.name}}</span> | <span>{{item.professor}}</span></p>
								<p><span>{{item.teachexp}}</span><span>{{item.workexp}}</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return{
				list:[
					{
						type:"会计类老师",
						icon:"icon-jisuanqi"
					},
					{
						type:"设计类老师",
						icon:"icon-sheji"
					},
					{
						type:"计算机类老师",
						icon:"icon-icondiannao"
					}
					
				],
				nowIndex:0,
				teacherList:[],
				accList:[],
				act:[],
				computer:[]
			}
		},
		created:function(){
			var _self = this;
	    	var url="http://hh.c1903.com/index/api/teacher"; 
	    	
			this.$http.post(url,{token:'xueyuanyi',code:'1a11c6a0e49a916429c1719fa8d587e2'}).then((res)=>{
				_self.teacherList = res.data;
				console.log(_self.teacherList);
				for (var i = 0; i <_self.teacherList.length; i++) {
					if(_self.teacherList[i].type == 6){
						_self.accList.push(_self.teacherList[i]);
					}else if(_self.teacherList[i].type == 7){
						_self.act.push(_self.teacherList[i]);
					}else if(_self.teacherList[i].type == 8){
						_self.computer.push(_self.teacherList[i]);
					}
				}
				console.log(_self.accList);
				console.log(_self.act);
				console.log(_self.computer);
		　　}).catch((err)=>{
		　　　　console.log(err);
		　　});
			document.title = "师资力量_扬州中瑞酒店职业学院互联网学院招生网";
		},
		methods:{
	        toggleTabs:function(index){
	            this.nowIndex=index;
	        },
	    }

	}
</script>